<div ng-controller="AdminSampleRequestController" style="height: 970px">
    <div class="pad_top" ng-if="sampleRequests.requests.length">
        <button type="button" ng-click="searchSampleLocations()" class="ice-button">
            Search Sample Locations
        </button>

        <span class="uib-dropdown">
            <!--todo filter and update the results based on selection-->
            Show <select ng-model="params.status" ng-change="requestSamples()"
                         ng-options="option for option in selectOptions"></select>

            <!--<button class="btn btn-default btn-xs btn-sm dropdown-toggle">-->
               <!--All <span class="caret"></span>-->
            <!--</button>-->
            <!--<ul class="dropdown-menu">-->
                <!--<li ng-repeat="choice in selectOptions">-->
                    <!--<a href class="font-90em">{{choice | capitalize}}</a>-->
                <!--</li>-->
            <!--</ul>-->
        </span>

        <span class="pull-right" style="border: 1px solid #ccc; margin-right: 12px;">
            <i class="fa fa-filter" style="background-color: #d9d9d9; padding: 5px; opacity: 0.7"></i>
            <input type="text" placeHolder="Filter by name" class="font-90em no_border"
                   ng-model="params.filter"
                   ng-change="requestSamples()"/>

            <!--<i class="fa fa-times-circle opacity_hover" style="padding-right: 2px"-->
               <!--ng-click="filter=undefined; requestSamples()" ng-show="filter"></i>-->
        </span>
    </div>

    <div class="pad_top" ng-if="sampleRequests.requests && !sampleRequests.requests.length">
        <i class="text-muted">No sample requests available</i>
    </div>

    <div class="pad_top">
        <div ng-if='!sampleRequests'><img src="img/loader-mini.gif"> Loading...</div>

        <table cellspacing="0" style="width: 98%" ng-if='sampleRequests && sampleRequests.requests.length > 0'
               class="table table-responsive table-condensed table-hover table-border-bottom font-95em"
               ng-class="{'opacity_4':loadingPage}">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th style="width: 170px;" class="entry-table-header">Entry</th>
                <th class="entry-table-header">
                    <span ng-click="sort('type')">Type</span>
                    <i ng-show="params.sort=='type'" class="fa"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th class="entry-table-header">Location</th>
                <th style="width: 65px" class="entry-table-header">
                    <span ng-click="sort('status')">Status</span>
                    <i ng-show="params.sort=='status'" class="fa"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
                <th>&nbsp;</th>
                <th class="entry-table-header">
                    <span ng-click="sort('requested')">Requested</span>
                    <i ng-show="params.sort=='requested'" class="fa"
                       ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr data-ng-repeat="request in sampleRequests.requests" class="highlight-row-icons">
                <td class="table-row-index">
                    {{((params.currentPage - 1) * params.limit) + $index + 1 | number}}
                </td>

                <td><a ng-href="entry/{{request.partData.id}}">{{request.partData.name}}</a>
                    <br>
                    <small>{{request.partData.selectionMarkers.toString()}}</small>
                </td>
                <td>
                    <span ng-if="request.requestType==='LIQUID_CULTURE'">
                        <i class="fa fa-flask cursor_default"></i> Liquid Culture
                    </span>
                    <span ng-if="request.requestType!=='LIQUID_CULTURE'">
                        <i class="fa fa-circle-o cursor_default"></i> Streak on Agar Plate
                    </span>

                    <div class="small" ng-if="request.growthTemperature">
                        <span class="opacity_4">growth temp:</span> {{request.growthTemperature}} &deg;C
                    </div>
                </td>
                <td>
                    <div ng-if="request.location[0].location.type==='SHELF'">
                        <strong style="color: #a52a2a;">SHELF {{request.location[0].location.display}}</strong><br>
                        Box
                        <small class="no_wrap">{{request.location[0].location.child.display || "&nbsp;"}}</small>
                        /
                        Well
                        <small class="no_wrap">{{request.location[0].location.child.child.display || "&nbsp;"}}</small>
                        /
                        Tube
                        <small class="no_wrap">{{request.location[0].location.child.child.child.display || "&nbsp;"}}
                        </small>
                    </div>

                    <div ng-if="request.location[0].location.type === 'PLATE96'">
                        <strong style="color: #a52a2a;">96 WELL PLATE
                            {{request.location[0].location.display}}</strong><br>
                        Well
                        <small class="no_wrap">{{request.location[0].location.child.display || "&nbsp;"}}</small>
                        /
                        Tube
                        <small class="no_wrap">{{request.location[0].location.child.child.display || "&nbsp;"}}</small>
                    </div>

                    <div ng-if="request.location[0].location.type === 'GENERIC'">
                        <strong style="color: #a52a2a;">GENERIC </strong><br>
                        <small class="no_wrap">{{request.location[0].location.display || "&nbsp;"}}</small>
                    </div>

                    <!--<div>-->
                    <!--{{request.location[0].location.type}}-->
                    <!--</div>-->

                </td>

                <td style="vertical-align: middle; width:65px; white-space:nowrap">
                    <span class="label" ng-class="{
                        'ice-label-success':request.status==='FULFILLED',
                        'label-default': request.status==='PENDING',
                        'ice-label-danger': request.status==='REJECTED',
                        'ice-label-info': request.status==='IN_CART'}">{{request.status | capitalize}}
                    </span>
                </td>
                <td style="width: 80px; vertical-align: middle">
                    <div ng-if="request.status==='PENDING'">
                        <i uib-tooltip="Fulfilled" class="fa fa-check font-14em green action"
                           ng-click="updateStatus(request, 'FULFILLED')"></i>
                        <i uib-tooltip="Reject" lass="fa fa-ban font-14em red action"
                           ng-click="updateStatus(request, 'REJECTED')"></i>
                    </div>
                </td>
                <td>
                    {{request.requestTime | date:'MMM dd, yyyy hh:mm a'}} <br>
                    <a ng-href="profile/{{request.requester.id}}" class="no_wrap small">{{request.requester.firstName}}
                        {{request.requester.lastName}}
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div ng-if='sampleRequests && sampleRequests.requests.length > 0'>
        <div class="col-md-6" style="padding-left: 0">
            <uib-pagination total-items="sampleRequests.count" ng-change="sampleRequestPageChanged()"
                            ng-model="params.currentPage" max-size="maxSize"
                            class="pagination-sm" items-per-page="15" boundary-links="true"></uib-pagination>
        </div>
        <div class="col-md-4" style="margin-top: 20px;"><strong class="small">
            <i ng-show="loadingPage" class="fa fa-spin fa-gear opacity_4"></i> {{pageCounts(params.currentPage,
            sampleRequests.count, params.limit)}}</strong>
        </div>
    </div>
</div>